<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <!--<link rel="stylesheet" type="text/css" href="/easyui/themes/metro/easyui.css"/>-->
    <!-- TopJUI框架样式 -->
    <link type="text/css" href="/topjui/css/topjui.core.min.css" rel="stylesheet">
    <link type="text/css" href="/topjui/themes/default/topjui.bluelight.css" rel="stylesheet" id="dynamicTheme"/>
    <!-- FontAwesome字体图标 -->
    <link type="text/css" href="/static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
    <!-- layui框架样式 -->
    <link type="text/css" href="/static/plugins/layui/css/layui.css" rel="stylesheet"/>
    <link type="text/css" href="/topjui/css/myui.css" rel="stylesheet"/>
    <script type="text/javascript" src="/static/public/js/topjui.config.js"></script>
    <!-- layui框架js -->
    <script type="text/javascript" src="/static/plugins/layui/layui.js" charset="utf-8"></script>
    <script src="/easyui/jquery.min.js"></script>
    <script src="/easyui/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="/topjui/js/sysutils.js"></script>
</head>

<body>

<table id="rowgrid" class="topjui-datagrid"></table>

<script type="text/javascript" charset="utf-8" th:inline="none">
    var listgrid;
    $(function(){
        listgrid = $('#rowgrid').datagrid({
            url:"/sys/tablelist",
            method:'get',
            fit : true,
            fitColumns : true,
            border : false,
            pagination : false,
            idField : 'id',
            sortName : 'id',
            sortOrder : 'desc',
            checkOnSelect : true,
            selectOnCheck : true,
            nowrap : false,
            columns:[[
                {
                    field:'id',
                    title:'编号',
                    width:50,
                    checkbox : true
                }, {
                    field:'name',
                    title:'表名称',
                    sortable:true,
                    width:40
                }, {
                    field:'rows',
                    title:'记录数',
                    sortable:true,
                    width:40
                }, {
                    field:'crtime',
                    title:'创建日期',
                    width:120
                }, {
                    field:'engine',
                    title:'表空间类型',
                    width:40
                }, {
                    field : 'action',
                    title : '操作',
                    width : 30,
                    align:'center',
                    formatter : function(value, row, index) {
                        return formatString('<img onclick="list_dataFun(\'{0}\');" style="cursor:pointer" src="{1}" title="查看表结构"/>', row.id, '/static/admin/images/zoom.png');
                    }
                }
            ]]
        });
    });

    function list_dataFun(id) {
        listgrid.datagrid('uncheckAll').datagrid('unselectAll').datagrid('clearSelections');
        $('<div/>').dialog({
            href : "/sys/dataform",
            width : 340,
            height : 340,
            modal : true,
            title : '表结构信息',
            buttons : [ {
                text : '查询表结构',
                iconCls : 'fa fa-save',
                btnCls: 'topjui-btn-normal',
                handler : function() {
                    var d = $(this).closest('.window-body');
                    $('#customerform').form('submit', {
                        url : "/sys/datadc",
                        dataType: 'json',
                        success : function(result) {
                            console.info(result);
                            var r = $.parseJSON(result);
                            try {
                                console.info(r.result);
                                console.info(r.code);
                                if (r.code=='200') {
                                    $("#customercontent").html(HTMLDecode(r.result));
                                }
                            } catch (e) {
                                $.messager.alert('提示', e);
                            }
                        }
                    });
                }
            } ],
            onClose : function() {
                $(this).dialog('destroy');
            },
            onLoad : function() {
                var index = listgrid.datagrid('getRowIndex', id);
                var rows = listgrid.datagrid('getRows');
                var o = rows[index];
                $('#customerform').form('load', o);
            }
        });
    }
</script>

</body>
</html>